<template>
  <div class="swiper-container swiper-container1">
    <div class="swiper-wrapper">
      <div class="swiper-slide" v-for="(img, index) of listImg" :key="index">
        <a :href="img.link" v-if="img.link.indexOf('http') > -1"><img :src="img.list" width="100%"></a>
        <router-link v-else :to="img.link"><img :src="img.list" width="100%"></router-link>
      </div>
    </div>
    <div class="swiper-pagination swiper-pagination-white"></div>
  </div>
</template>
<script>
  /* import Swiper from '../../static/swiper'
  import '../plugins/swiper/swiper.css' */
  export default {
    name: 'swiper',
    props: ['listImg'],
    mounted () {
      var swiper = new Swiper('.swiper-container1', {
        autoplay: 3000,
        autoplayDisableOnInteraction: false,
        pagination: '.swiper-pagination',
        // nextButton: '.swiper-button-next',
        // prevButton: '.swiper-button-prev',
        slidesPerView: 1,
        paginationClickable: true,
        loop: true,
        onTouchEnd: function () {
          swiper.startAutoplay()
        }
      })
    }
  }
</script>
<style scope lang="scss">
  .swiper-slide{
    a{
      display: block;
      img{
        max-width: 100%;
        display: inherit;
      }
    }
  }
  .swiper-pagination.swiper-pagination-white span.swiper-pagination-bullet {
    width: 12px;
    height: 2px;
    background: #bbbbbb;
    opacity: 0.7;
    display: inline-block;
    border-radius: 0!important;
  }
  .swiper-pagination.swiper-pagination-white span.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #ffffff;
    opacity: 1;
  }
</style>
